<template>
  <el-dialog
    title="渠道修改"
    :append-to-body="true"
    :visible.sync="open"
    :show-close="!open"
    width="60%"
    top="4vh"
  >
    <el-row :gutter="15">
      <el-form inline size="medium" :model="datas" style="padding-left: 40px">
        <el-form-item label="患者姓名：">{{ datas.name }}</el-form-item>
        <el-form-item label="患者电话：">{{ datas.phoneNumber }}</el-form-item>
      </el-form>
      <el-form
        ref="form"
        :model="form"
        size="medium"
        :rules="rules"
        label-width="100px"
      >
        <el-col :span="12">
          <el-form-item label="原建档人">
            <el-input
              v-model="datas.filingPerson"
              placeholder="请输入原建档人"
              :maxlength="11"
              readonly
              prefix-icon="el-icon-mobile"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="新建档人" prop="newFilingPerson">
            <div class="filingBox">
              <el-input v-model="form.newFilingPerson" clearable />
              <el-button type="text" @click="handleDialogue('新建档人')"
                >选择</el-button
              >
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原跟进人">
            <el-input
              v-model="datas.followPerson"
              placeholder="请输入原跟进人"
              :maxlength="11"
              disabled
              prefix-icon="el-icon-mobile"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="新跟进人" prop="newFollowPerson">
            <div class="filingBox">
              <el-input
                v-model="form.newFollowPerson"
                clearable
                @clear="clearPerson"
              />
              <el-button type="text" @click="handleDialogue('新跟进人')"
                >选择</el-button
              >
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原归属人">
            <el-input
              v-model="datas.affiliationPerson"
              disabled
              prefix-icon="el-icon-mobile"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="新归属人" prop="newAffiliationPerson">
            <div class="filingBox">
              <el-input v-model="form.newAffiliationPerson" disabled />
              <!-- <el-button
                v-if="datas.affiliationPerson"
                type="text"
                @click="handleDialogue('新归属人')"
                >选择</el-button
              > -->
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="多级渠道" prop="channel">
            <el-cascader
              v-model="datas.channel"
              style="width: 100%"
              placeholder="多级媒介"
              disabled
              :options="channelOptions"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="多级渠道" prop="channel">
            <el-cascader
              v-model="form.channel"
              style="width: 100%"
              placeholder="请选择渠道"
              :options="channelOptions"
              @change="handleChannelChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="上传图片"
            prop="url"
            class="upload"
            :class="{ hide: hideUpload }"
          >
            <el-upload
              action="#"
              :limit="1"
              :file-list="imgFileList"
              list-type="picture-card"
              :before-upload="beforeUpload"
              :http-request="requestUpload"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :append-to-body="true" :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注" prop="remarks">
            <el-input
              v-model="form.remarks"
              type="textarea"
              placeholder="请输入备注"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">取消</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <select-model
      :show="show"
      :title="title"
      @close="close"
      @confirm="confirm"
    />
  </el-dialog>
</template>
<script>
import selectModel from '@/components/yiya/showOrHide/selectModel'
import oss from '@/mixins/oss'
import { addAudit } from '@/api/erp/audit'
import { mapState } from 'vuex'

export default {
  name: 'ChanelTabel',
  components: {
    selectModel,
  },
  mixins: [oss],
  props: {
    datas: {
      type: Object,
      default() {
        return {}
      },
    },
    channelOptions: {
      type: Array,
      default() {
        return []
      },
    },
    open: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {
        marketReservationId: undefined,
        url: undefined,
        newFilingPerson: undefined,
        newFollowPerson: undefined,
        newAffiliationPerson: undefined,
        channelFirst: undefined,
        channelSecond: undefined,
        channelThird: undefined,
        remarks: undefined,
        channel: undefined,
        auditStatus: 0,
        createTime: undefined,
        createBy: undefined,
      },
      dialogImageUrl: '',
      dialogVisible: false,
      show: false,
      title: '',
      imgFileList: [],
      hideUpload: false, //是否显示上传图片的加号
      rules: {
        url: [{ required: true, message: '资源地址不能为空', trigger: 'blur' }],
        remarks: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
        channel: [{ required: true, message: '渠道不能为空', trigger: 'blur' }],
      },
    }
  },
  computed: {
    ...mapState({
      userName: (state) => state.user.name,
    }),
  },
  methods: {
    clearPerson() {
      this.form.newFollowPerson = undefined
      this.form.newFollowPersonId = undefined
      this.form.newAffiliationPerson = undefined
      this.form.newAffiliationPersonId = undefined
    },
    handleChannelChange(e) {
      if (e) {
        ;[
          this.form.channelFirst,
          this.form.channelSecond,
          this.form.channelThird,
        ] = e
      } else {
        return
      }
    },
    confirm(e) {
      if (e.title == '新建档人') {
        this.form.newFilingPerson = e.userName
        this.form.newFilingPersonId = e.userId
      } else if (e.title == '新跟进人') {
        this.form.newFollowPerson = e.userName
        this.form.newFollowPersonId = e.userId
        if (
          this.datas.affiliationPerson == '' ||
          this.datas.affiliationPerson == null ||
          this.datas.affiliationPerson == undefined
        ) {
          this.form.newAffiliationPerson = e.userName
          this.form.newAffiliationPersonId = e.userId
        }
      } else {
        return
      }
      this.show = false
    },
    close(e) {
      this.show = e
    },
    handleDialogue(msg) {
      this.title = msg
      this.show = true
    },
    handleRemove(file, fileList) {
      this.imgFileList = fileList
      this.hideUpload = false
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    requestUpload(file) {
      this.cropperUpload('channelChange', file.file, this.ossData).then(
        (response) => {
          if (response.res.status === 200 && response.res.statusCode === 200) {
            const imageUrl = `https://${this.host}/${response.name}`
            const obj = {
              name: file.file.name,
              uid: file.file.uid,
              url: imageUrl,
            }
            this.imgFileList.push(obj)
            this.hideUpload = true
          } else {
            this.msgError(response.msg)
          }
        }
      )
    },
    submitForm() {
      try {
        if (this.imgFileList[0].url) {
          this.form.url = this.imgFileList[0].url
        }
      } catch (error) {
        this.$message.error('亲,您还没有上传图片!')
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.imgFileList.length == 0) {
            this.$message.error('亲,您还没有上传图片!')
            return
          } else {
            this.form.marketReservationId = this.datas.id
            this.form.createTime = this.parseTime(
              new Date(),
              '{y}-{m}-{d} {h}:{i}:{s}'
            )
            this.form.createBy = this.userName
            addAudit(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess('新增成功')
                this.resetForm()
              } else {
                this.msgError(response.msg)
                this.resetForm()
              }
            })
          }
        } else {
          return
        }
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['form'].resetFields()
      this.hideUpload = false
      this.imgFileList = []
      this.form = {}
      this.$emit('turnoff', false)
    },
  },
}
</script>
<style lang="scss" scoped>
.el-upload__tip {
  line-height: 1.2;
}
.hide >>> .el-upload--picture-card {
  display: none;
}
.filingBox {
  display: flex;
}
.filingBox:nth-child(1) div {
  margin-right: 10px;
}
</style>
